<template>
  <div id="app" class="app-container">
    <GlobalHeader v-if="showHeader" />
    <router-view />
    <GlobalFooter v-if="showFooter" />
    <GlobalNotification ref="globalNotification" />
    <BackToTop />
    <!-- 弹出框，显示未登录提示 -->
    <Toast v-if="showToastMessage" :message="toastMessage" type="warning" />
  </div>
</template>

<script setup>
import { computed, onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { useThemeStore } from "@/stores/theme";
import { useUserStore } from '@/stores/user';
import GlobalHeader from "@/components/global/GlobalHeader.vue";
import GlobalFooter from "@/components/global/GlobalFooter.vue";
import GlobalNotification from "@/components/global/GlobalNotification.vue";
import BackToTop from "@/components/global/BackToTop.vue";

const route = useRoute();
const themeStore = useThemeStore();
const userStore = useUserStore();
const globalNotification = ref(null);

onMounted(() => {
  themeStore.initTheme();
  themeStore.watchSystemTheme();
  window.$notification = globalNotification.value;
});

// 控制通知显示
const showNotification = computed(() => {
  // 在登录/注册页面、忘记密码页面不显示通知
  const hideNotificationPaths = ["/login", "/register", "/forgot-password"];
  return !hideNotificationPaths.includes(route.path);
});

// 控制头部显示
const showHeader = computed(() => {
  // 在后台页面、登录/注册页面、手机APP、电脑客户端、反馈、帮助页面不显示全局头部
  const hideHeaderPaths = [
    "/login",
    "/register",
    "/forgot-password",
    "/download/app",
    "/download/desktop",
    "/feedback",
    "/help",
    "/help/guide",
  ];
  const isAdminPath = route.path.startsWith("/admin");
  const isMerchantPath =
    route.path.startsWith("/merchant") &&
    route.path !== "/merchant/apply" &&
    route.path !== "/merchant/apply-form" &&
    route.path !== "/merchant/status";
  const isHotelAdminPath = route.path.startsWith("/hotel-admin");
  return (
    !hideHeaderPaths.includes(route.path) &&
    !isAdminPath &&
    !isMerchantPath &&
    !isHotelAdminPath
  );
});

// 控制底部显示
const showFooter = computed(() => {
  // 在后台页面、登录/注册页面、AI聊天页面、地图页面、手机APP、电脑客户端、反馈、帮助页面不显示全局底部
  const hideFooterPaths = [
    "/login",
    "/register",
    "/forgot-password",
    "/ai-chat",
    "/map",
    "/download/app",
    "/download/desktop",
    "/feedback",
    "/help",
    "/help/guide",
  ];
  const isAdminPath = route.path.startsWith("/admin");
  const isMerchantPath =
    route.path.startsWith("/merchant") &&
    route.path !== "/merchant/apply" &&
    route.path !== "/merchant/apply-form" &&
    route.path !== "/merchant/status";
  const isHotelAdminPath = route.path.startsWith("/hotel-admin");
  return (
    !hideFooterPaths.includes(route.path) &&
    !isAdminPath &&
    !isMerchantPath &&
    !isHotelAdminPath
  );
});
</script>

<style lang="scss">
.app-container {
  @apply min-h-screen flex flex-col bg-gray-50 dark:bg-gray-900;
}

#app {
  @apply text-gray-900 dark:text-gray-100;

  ::selection {
    @apply bg-primary-500/20;
  }
}
</style>
